<template>
  <div class="container">
    <p>
      达才落盲炕惋德胸晨山昏靶肘湾洼葛衙诀捌顿剑名值搀膨逝挟虏锦只塘搬驮田菩挥趁固舆井魂一冠韵蕉归纠嫂碍矢往些朝攒脸型滚肚奋僵睦扮瓢耙沟卵苹着嗤倒阴邑逻谚邦卑涧育职惭慨慢清源期言疾苍蟆天揪碘锯宜便哨碌纤佣泡在磕趾轨宾抄移牵怪遭辆敬榕窘离视拐绽蒋晤戚傻贷娩半课桑昵裹战肿溉根今碑赛罕庸严臊禽审毛保腹余捡芬黎帐围姊突篱玄樱擦讼靠仇乌研孽月怨爸守妥忧爹胁急梦艾坊担盆助原挺呆砍溯瘦铛消闹捏叫谆它葬钥薛醉袁贺啄粹谋
    </p>
    <p class="eraser">
      <span class="text">达才落盲炕惋德胸晨山昏靶肘湾洼葛衙诀捌顿剑名值搀膨逝挟虏锦只塘搬驮田菩挥趁固舆井魂一冠韵蕉归纠嫂碍矢往些朝攒脸型滚肚奋僵睦扮瓢耙沟卵苹着嗤倒阴邑逻谚邦卑涧育职惭慨慢清源期言疾苍蟆天揪碘锯宜便哨碌纤佣泡在磕趾轨宾抄移牵怪遭辆敬榕窘离视拐绽蒋晤戚傻贷娩半课桑昵裹战肿溉根今碑赛罕庸严臊禽审毛保腹余捡芬黎帐围姊突篱玄樱擦讼靠仇乌研孽月怨爸守妥忧爹胁急梦艾坊担盆助原挺呆砍溯瘦铛消闹捏叫谆它葬钥薛醉袁贺啄粹谋</span>
    </p>
  </div>
</template>
<script setup>

</script>
<style scoped lang="scss">
  .container {
    width: 200px;
    position: relative;
    margin: 0 auto;
    .eraser {
      position: absolute;
      inset: 0;
      .text {
        --p:10%;
        background: linear-gradient(to right,#0000 var(--p),#000 calc(var(--p) + 100px));
        color: transparent;
        animation: erase 1s linear infinite ;
      }
    }
  }
  //设置成数值
  @property --p {
    syntax:'<percentage>';
    initial-value:0%;
    inherits:false;
  }
  @keyframes erase {
    to {
      --p:100%;
    }
  }
</style>
